<template>
  <div>
    <el-button @click="drawerVisible = true">打开 Drawer</el-button>

    <el-drawer
  v-model="drawerVisible"
  :with-header="false"
  direction="rtl"
  :size="drawerWidth + 'px'" 
  ref="drawerRef"
>
      <!-- 可拖拽区域 -->
      <div class="resizer" @mousedown="startResizing"></div>

      <!-- 内容区域 -->
      <div class="content">
        <p>这是内容区域</p>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { throttle } from 'lodash-es'

const drawerVisible = ref(false)
const drawerWidth = ref(800) // 初始宽度
const isResizing = ref(false)

// 监听鼠标移动和释放事件
const handleMouseMove = throttle ((e) => {
  console.log('Resizing drawer:', e.clientX)
  console.log('isResizing:', isResizing.value)
  if (!isResizing.value) return
  console.log('Resizing drawer width:', drawerWidth.value)
  const newWidth = window.innerWidth - e.clientX
  if (newWidth > 200 ) {
    drawerWidth.value = newWidth
  }
},16)

const stopResizing = () => {
  isResizing.value = false
}

const startResizing = (e) => {
  isResizing.value = true
  e.preventDefault()
}

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove)
  window.addEventListener('mouseup', stopResizing)
})
</script>

<style scoped>
.resizer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px; /* 鼠标悬停区域 */
  cursor: ew-resize;
  background-color: transparent;
  z-index: 10;
}

.content {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.el-drawer__body {
  height: 100%;
}
</style>